<template>
  <div class="v-eqpt-type-view">
    <c-row-crumb :title="multLang('title_aaaar')"></c-row-crumb>
    <c-row-view :title="tplLang('title_asset_e', ['title_asset_c'])">
      <template #opn>
        <c-row-view-opn
          :auth="true"
          :visible.sync="visibles.edit"
          @cancel="cancel"
          @save="save"
        >
        </c-row-view-opn>
      </template>
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
        label-width="120px"
        :validate-on-rule-change="false"
      >
        <c-row :col="4">
          <c-col>
            <el-form-item
              :label="multLang('title_name_b', ':')"
              prop="category_name"
            >
              <c-form-edit :visible="visibles.edit">
                <template #edit>
                  <el-input
                    v-model="form.category_name"
                    :placeholder="multLang('text_d')"
                  ></el-input>
                </template>
                <span>{{ form.category_name }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item
              :label="multLang('title_category_a', ':')"
              prop="type"
            >
              <c-form-edit :visible="visibles.edit">
                <template #edit>
                  <c-cascader
                    v-model="form.type"
                    :options="assetCategoryTypeList"
                    clearable
                    :placeholder="
                      tplLang('text_choose_a', ['title_category_a'])
                    "
                  ></c-cascader>
                </template>
                <span>{{ assetCategoryTypeMap[form.type] }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item
              :label="multLang('title_e', ':')"
              prop="category_code"
            >
              <c-form-edit :visible="visibles.edit">
                <template #edit>
                  <el-input
                    v-model="form.category_code"
                    :placeholder="multLang('text_d')"
                  ></el-input>
                </template>
                <span>{{ form.category_code }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item :label="multLang('title_f', ':')" prop="parent_id">
              <c-form-edit :visible="visibles.edit">
                <template #edit>
                  <c-cascader
                    v-model="form.parent_id"
                    :options="options.categoryList"
                    clearable
                    :placeholder="tplLang('text_choose_a', ['title_f'])"
                  ></c-cascader>
                </template>
                <span>{{ assetTypeAllMap[form.parent_id] }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col :col="11">
            <el-form-item :label="multLang('title_note_a', ':')" prop="remark">
              <c-form-edit :visible="visibles.edit" long>
                <template #edit>
                  <c-input-text v-model="form.remark"></c-input-text>
                </template>
                <span>{{ form.remark }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
        </c-row>
      </el-form>
    </c-row-view>
  </div>
</template>
<script>
import { editAssetType, getAssetTypeInfo } from '@/http/api/v1/eqpt-type'
import { ObjectCopy } from '@/util'
import { normalTree } from '@/util/data'
import { closeTag } from '@/util/router'
export default {
  name: 'CEqptTypeView',
  components: {},
  props: {},
  data() {
    return {
      options: {
        categoryList: []
      },
      visibles: {
        edit: false
      },
      form: {
        id: null,
        category_name: '',
        type: null,
        category_code: '',
        parent_id: null,
        remark: ''
      }
    }
  },
  computed: {
    assetTypeAllTree() {
      return this.optionTree('asset_type_all')
    },
    assetTypeAllMap() {
      return this.optionMap('asset_type_all')
    },
    assetCategoryTypeList() {
      return this.optionList('asset_category_type')
    },
    assetCategoryTypeMap() {
      return this.optionMap('asset_category_type')
    },
    rules() {
      return {
        category_name: {
          required: true,
          message: this.tplLang('title_name_w', ['title_name_b']),
          trigger: 'blur'
        },
        type: {
          required: true,
          message: this.tplLang('title_name_w', ['title_category_a']),
          trigger: 'change'
        }
      }
    }
  },
  watch: {},
  beforeCreate() {},
  created() {
    this.setOption({
      key: 'asset_type_all'
    })
    this.setOption({
      key: 'asset_category_type'
    })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {
    const {
      name,
      params: { id, edit }
    } = this.$route
    const cacheid = id || this.id
    if (cacheid) {
      this.id = cacheid
      getAssetTypeInfo({ asset_category_id: cacheid }).then(({ data }) => {
        ObjectCopy(this.form, data)
      })
      this.setOption({
        key: 'asset_category',
        out: true,
        option: {
          id
        }
      }).then(data => {
        this.options.categoryList = normalTree(data || [])
      })
    } else {
      closeTag(name)
    }
    typeof edit === 'boolean' && (this.visibles.base = edit)
  },
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    cancel() {
      this.visibles.edit = false
      this.$nextTick().then(() => this.$refs.form.clearValidate())
    },
    save() {
      this.$refs.form.validate(valid => {
        if (valid) {
          editAssetType({ ...this.form }).then(() => {
            this.visibles.edit = false
          })
        }
      })
    }
  }
}
</script>
<style lang="scss"></style>
